<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>励控智能终端</title>
		<link rel="stylesheet" href="lib/layui/css/layui.css" />
		<style>
			.layui-anim {
				-webkit-animation-fill-mode: none;
				animation-fill-mode: none;
			}
		</style>
	</head>

	<body>
		<div>
			<div class="layui-row">
				<div class="layui-col-sm8 layui-col-sm-offset2">
					<div class="layui-tab layui-tab-brief">
						<ul class="layui-tab-title">
							<li class="layui-this">IC卡信息</li>
							<li>刷卡记录</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
<!--								<div class="layui-btn-container">-->
<!--									<button class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-danger"><i class="layui-icon">&#xe640;</i> 批量删除</button>-->
<!--									<button class="layui-btn  layui-btn-sm layui-btn-radius  layui-btn-normal"><i class="layui-icon">&#xe62f;</i>导入</button>-->
<!--									<button class="layui-btn  layui-btn-sm  layui-btn-radius  layui-btn-normal"><i class="layui-icon">&#xe601</i>导出</button>-->
<!--								</div>-->
								<table class="layui-table" lay-data="{height:600, url:'/card/info',contentType: 'application/json',method:'post', page:true, id:'test'}" lay-filter="cardinfo">
									<thead>
										<tr>
<!--											<th lay-data="{field:'id', width:80, sort: true}">ID</th>-->
											<th lay-data="{field:'name', width:180,align:'center'}">姓名</th>
											<th lay-data="{field:'sex', width:80,align:'center',templet: '#sexTpl'}">性别</th>
											<th lay-data="{field:'department',align:'center'}">部门</th>
											<th lay-data="{field:'position',align:'center'}">职位</th>
											<th lay-data="{field:'card_num', sort: true,align:'center'}">卡号</th>
											<th lay-data="{field:'add_time',align:'center'}">添加时间</th>
										</tr>
									</thead>
								</table>
							</div>
							<div class="layui-tab-item">
								<table class="layui-table" lay-data="{height:600, url:'/card/his',contentType: 'application/json',method:'post', page:true, id:'test'}" lay-filter="cardhistory">
									<thead>
										<tr>
											<th lay-data="{field:'card_num', sort: true,align:'center'}">卡号</th>
											<th lay-data="{field:'event_time', sort: true,align:'center'}">刷卡时间</th>
											<th lay-data="{field:'name', width:180,align:'center'}">姓名</th>
											<th lay-data="{field:'sexstr', width:80, sort: true,align:'center'}">性别</th>
											<th lay-data="{field:'department',align:'center'}">部门</th>
											<th lay-data="{field:'position',align:'center'}">职位</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/sha.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/card.js"></script>
		<script type="text/javascript" src="lib/layui/layui.js"></script>
		<script type="text/html" id="sexTpl">
			{{#  if(d.sex == 0){ }}
			女
			{{#  } else { }}
			男
			{{#  } }}
		</script>
		<script>
			layui.use('element', function() {
				var element = layui.element;
				element.on('tab(filter)', function(data) {
					console.log(this); //当前Tab标题所在的原始DOM元素
					console.log(data.index); //得到当前Tab的所在下标
					console.log(data.elem); //得到当前的Tab大容器
				});

				element.on('nav(filter)', function(elem) {
					console.log(elem); //得到当前点击的DOM对象
				});
			});
			layui.use('table', function() {
				var table = layui.table;
			});
		</script>
	</body>

</html>